<% presenter = ::Layouts::FooterPresenter.new(self) %>
<footer class="footer__container shrink-0 border-t print:hidden">
  <section
    class="flex flex-col md:flex-row w-full lg:max-w-5xl mx-auto justify-between items-start py-8 px-3"
  >
    <% if presenter.nav_links.any? %>
      <div class="pt-2 w-full md:w-2/5">
        <div class="flex flex-col items-left md:pe-5 text-center ltr:md:text-left rtl:md:text-right">
        <span class="uppercase font-bold text-xs py-2 tracking-wide"
        ><%= t('.sitemap') %></span
        >
          <div id="bottom-nav-container" class="w-full flex flex-row flex-wrap text-xs font-semibold">
            <% presenter.nav_links.each do |nav_link| %>
              <div class="w-1/3">
                <%=
                  link_to(
                    nav_link[:title],
                    nav_link[:url],
                    { class: 'no-underline break-words mx-2 pt-2 pb-1 block hover:text-primary-500 focus:outline-none focus:text-primary-500' }.merge(
                      nav_link[:custom] ? { target: '_blank', rel: 'noopener' } : {},
                    ),
                  )
                %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    <% end %>
    <div class="pt-5 md:pt-2 w-full md:flex-1 md:pe-5">
      <% if presenter.social_links.any? %>
        <p
          class="uppercase font-bold text-xs py-2 tracking-wide text-center ltr:md:text-left rtl:md:text-right"
        >
          <%= t('.social') %>
        </p>
        <div class="py-2 flex flex-wrap justify-center md:justify-start">
          <% presenter.social_links.each do |social_link| %>
            <a
              class="h-8 w-8 me-2 hover:text-primary-500 flex items-center justify-center no-underline pointer-cursor focus:outline-none focus:text-primary-500"
              href="<%= social_link[:url] %>"
              target="_blank"
              rel="noopener"
            >
              <i
                class="text-xl <%= presenter.social_icon(social_link[:url]) %>"
              ></i>
            </a>
          <% end %>
        </div>
      <% end %>
    </div>
    <div class="pt-5 md:pt-2 w-full md:w-1/5 text-center ltr:md:text-left rtl:md:text-right">
      <div class="text-xs">
        <% if presenter.address.present? %>
          <p class="uppercase font-bold text-xs py-2 tracking-wide"><%= t('.contact') %></p>
          <address class="font-semibold leading-normal not-italic">
            <%= presenter.address.html_safe %>
          </address>
        <% end %>
        <div class="text-xs py-2">
          <% if presenter.email_address.present? %>
            <p>
              <%= t('.reach_us') %>
              <strong>
                <!--email_off--><%= mail_to presenter.email_address, presenter.email_address, class: "font-bold no-underline pointer-cursor focus:outline-none focus:text-primary-500 break-words" %><!--/email_off-->
              </strong>.
            </p>
          <% end %>
        </div>
      </div>
    </div>
  </section>
  <%= render 'layouts/footer_bottom', presenter: presenter %>
</footer>
